<template>
  <el-form :model="nodeModalForm" ref="nodeModal" label-placement="left" label-width="100px" :rules="nodeModalRules"
           size="small">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="节点名称" prop="nodeName">
          <el-input v-model.trim="nodeModalForm.nodeName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <table align="center" class="add_table w_100">
          <tr>
            <th width="70"><span class="iconfont icon-Add cursor_point" @click="handleAddItem"></span></th>
            <th>字段</th>
            <th>null替换值</th>
          </tr>
          <tr v-for="(item,index) in nodeModalForm.isnull" :key="index">
            <td width="70" align="center">
              <span class="iconfont icon-Add cursor_point px_2" @click="handleAddItem(index)"></span>
              <span class="iconfont icon-close cursor_point px_2" @click="handleDeleteItem(index)"></span>
            </td>
            <td>
              <el-select v-model="item.field" @change="fieldAction(item,index)" clearable filterable placeholder="字段"
                         class="fixed-icon w_100">
                <el-option v-for="item in rowsList" :key="item.alias" :label="item.alias" :value="item.alias">
                  <span style="float: left">{{ item.alias }}</span>
                  <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{
                      item.DATA_TYPE
                    }}</span>
                </el-option>
              </el-select>
            </td>
            <td>
              <el-input v-if="fieldType(item.DATA_TYPE) === 'input'" v-model.trim="item.value" class="w_100"></el-input>
              <el-input-number v-else-if="fieldType(item.DATA_TYPE) === 'number'" class="w_100"
                               v-model.number="item.value"></el-input-number>
              <el-date-picker v-else-if="fieldType(item.DATA_TYPE) === 'date'" class="w_100" v-model="item.value"
                              type="datetime" :default-time="defaultTime"></el-date-picker>
            </td>
          </tr>
        </table>
      </el-col>
    </el-row>
    <div class="nodeModal-footer">
      <span class="dialog-footer">
        <el-button plain @click="handleConfigCancel">取消</el-button>
        <el-button type="primary" @click="handleConfigConfirm">更新</el-button>
      </span>
    </div>
  </el-form>
</template>

<script>
import { computed, defineComponent, inject, onMounted, ref } from "vue"
import { useEtlStore } from "../../../../../store/flowEtl"
import { charType, dateType, numberType } from "../../../../../utils/constant"

export default defineComponent({
  name: "node-config-isnull",
  props: {
    node: Object,
  },
  components: {},
  setup (props, ctx) {
    const etlStore = useEtlStore()
    const nodeList = computed(() => etlStore.nodeList)
    const nodeConfigClose = inject("nodeConfigClose")
    const rowsList = ref([])
    const nodeModalForm = ref({
      nodeName: "",
      isnull: [],
    })
    const nodeModal = ref()
    const tableLoading = ref(false)
    const nodeModalRules = ref({
      nodeName: {
        required: true,
        message: "请输入数据源名称",
        trigger: "blur",
      },
      isnull: {
        required: true,
        message: "请选择要去重的字段",
        trigger: "change",
      },
    })
    const handleConfigCancel = () => {
      nodeConfigClose()
    }
    const nodeConfigUpdate = (node) => {
      let nodes = [...nodeList.value].map((item) => {
        if (item.id === node.id) {
          item.status = true
          item.nodeName = node.nodeName
          item.config.isnull = node.isnull
        }
        return item
      })
      etlStore.setNodeList(nodes)
      nodeConfigClose()
    }
    const handleConfigConfirm = () => {
      nodeModal.value.validate((valid) => {
        if (valid) {
          nodeConfigUpdate(nodeModalForm.value)
        } else {
          return false
        }
      })
    }
    const resetForm = () => {
      nodeModalForm.value = {
        id: null,
        nodeName: "",
        isnull: [],
      }
    }
    const handleAddItem = (index) => {
      if (index) {
        nodeModalForm.value.isnull = [...nodeModalForm.value.isnull.splice(0, index + 1), {
          field: "",
          value: "",
          DATA_TYPE: "",
        }, ...nodeModalForm.value.isnull.splice(index - 1, nodeModalForm.value.isnull.length)]
      } else {
        nodeModalForm.value.isnull.push({
          field: "",
          value: "",
          DATA_TYPE: "",
        })
      }
    }
    const handleDeleteItem = (index) => {
      nodeModalForm.value.isnull.splice(index, 1)
    }
    const fieldAction = (item, idx) => {
      let row = rowsList.value.find((row) => {
        return item.field === row.alias
      })
      nodeModalForm.value.isnull[idx].DATA_TYPE = row.DATA_TYPE
    }
    const fieldType = (type) => {
      let regType = type.replace(/[0-9]+/g, "")
      if (numberType.includes(regType)) {
        return "number"
      } else if (dateType.includes(regType)) {
        return "date"
      } else if (charType.includes(regType)) {
        return "input"
      } else {
        return "input"
      }
    }
    const defaultTime = new Date(2000, 1, 1, 12, 0, 0)
    onMounted(() => {
      resetForm()
      rowsList.value = props.node.config.fields
      nodeModalForm.value = {
        id: props.node.id,
        nodeName: props.node.nodeName,
        isnull: props.node.config.isnull,
      }
    })
    return {
      nodeList,
      tableLoading,
      nodeModalForm,
      nodeModalRules,
      nodeModal,
      rowsList,
      fieldAction,
      resetForm,
      handleConfigCancel,
      handleConfigConfirm,
      nodeConfigUpdate,
      nodeConfigClose,
      handleAddItem,
      defaultTime,
      fieldType,
      handleDeleteItem,
    }
  },
})
</script>

<style scoped>
.field-table {
  padding: 0 12px 24px;
}

.nodeModal-footer {
  padding: var(--el-dialog-padding-primary);
  padding-top: 10px;
  text-align: right;
  box-sizing: border-box;
}
</style>